$(function () {
    //导航
    $(".nav-father>li").hover(function () {
        $(this).children("ul").stop().slideToggle(200);
    })
    // // 轮播
    //  鼠标经过就显示箭头隐藏显示按钮
    $(".focus").hover(function () {
        $(".next,.prev").stop().fadeIn();
        clearInterval(timer);
        timer = null; //清楚定时器变量
    }, function () {
        $(".next,.prev").stop().fadeOut();
        timer = setInterval(function () {
            $(".next").click();
        }, 2000)
    })
    //动态生成小圆圈，数量取决于图片的数量
    // console.log($(".focus>ul").children().length);
    $(".focus>ul").children().each(function () {
        $(".pointer").append('<li></li>');
    })
    // 给小圆圈第一个li设置类名current
    $(".pointer").children().eq(0).addClass('current');
    // 点击当前圆圈颜色选中
    var ul = document.querySelector(".lunbo");
    console.log(ul);
    var focus = $(".focus").outerWidth();
    $(".pointer").children().click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        //ul 的移动距离就是小圆圈的索引号乘图片的宽度注意是负值
        var index = $(this).index();
        console.log(index);
        num = index;
        circle = index;
        animate(ul, -index * focus);
    })
    // 克隆第一张图片li放到ul后面
    var first = ul.children[0].cloneNode(true);
    ul.append(first);
    //点击右侧按钮滚动
    // circle控制小圆圈的播放
    var circle = 0;
    var num = 0;
    $(".next").click(function () {
        // 如果走到了最后复制的一张图片此时我们的ul要快速复原left为0
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focus);
        // 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle++;
        if (circle == ul.children.length - 1) {
            circle = 0;
        }
        $(".pointer").children().eq(circle).addClass('current').siblings().removeClass('current');

    })
    //左侧按钮滚动
    $(".prev").click(function () {
        // 如果走到了最后复制的一张图片此时我们的ul要快速复原left为0
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focus + 'px';
        }
        num--;
        animate(ul, -num * focus);
        // 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        //如果circle < 0说明第一 张图片，则小圆圈要改为第4个小圆圈(3)
        circle--;
        // if (circle < 0) {
        //     circle = 3;
        // }
        circle = circle < 0 ? circle = 3 : circle;
        $(".pointer").children().eq(circle).addClass('current').siblings().removeClass('current');

    })
    //自动播放轮播图
    var timer = setInterval(function () {
        // 因为自动播放是和右侧按钮功能一致，所以手动调用
        $(".next").click();

    }, 2000)

    // 回到顶部
    $(".to_top").click(function () {
        $("html,body").stop().animate({
            scrollTop: 0
        }, 800);
    })
    // 当我们点击了li，此时不需要执行页面滚动事件里面的li背景选择添加current
    // 节流阀
    var flag = true;
    var toolTop = $(".recom").offset().top;
    toggelTool();

    function toggelTool() {
        if ($(document).scrollTop() >= toolTop) {

            $(".fixedtool").fadeIn();
            $(".to_top").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
            $(".to_top").fadeOut();
        }
    }
    $(document).scroll(function () {
        toggelTool();
        // 页面滚动到某个内容区域,左侧电梯导航的li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // 通过滚动拿到每个li的索引
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    $(".fixedtool li").click(function () {
        flag = false;
        // 当我们每次点击li就需要计算出页面要去往的位置
        //选出对应索引号的内容区的盒子计算它的. offset(). top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        $("body,html").stop().animate({
            scrollTop: current + 1
        }, function () {
            flag = true;
        });
        $(this).addClass("current").siblings().removeClass();

    })

})